﻿@model PhotoGallery.Models.AudioInfo
@using PhotoGallery.Views

@{
    ViewBag.Title = "Create";
}
@section javascript{
    <script src="http://malsup.github.com/jquery.form.js"></script>
    <link href="@Url.Content("~/Content/FileUpload.css")" rel="stylesheet" />
}
<h2>@Labels.add</h2>
@using (Html.BeginForm("Create","Audio",FormMethod.Post,new {enctype = "multipart/form-data"})) {
    <fieldset>
        <legend>@Labels.audio</legend>
        @Html.ValidationSummary(true)
        <div class="editor-label">
            @Labels.uploadFile:<br>
        </div>
        <div class="editor-field">
            <input type="file" name="files"  accept="audio/*" class=" validate[required,custom['File is required']" />
        </div>
        <div class="editor-label">
            @Labels.uploadThumbnail:<br>
        </div>
        <div class="editor-field">
            <input type="file" name="thummnail"  accept="image/*" />
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Title)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Title)
            @Html.ValidationMessageFor(model => model.Title)
        </div>
        <p>
            <input type="submit" value="@Labels.save" />
            <a href="@Html.Encode(@Html.Encode(ViewBag.backUrl))" class="button-link-100" >@Labels.cancel </a>
        </p>
    </fieldset>
    <div class="progress">
        <div class="bar"></div >
        <div class="percent">0%</div >
    </div>
}
<script>
@*$('form').validate();

$('submit').click(function () {
    alert($('form').validate().form());
    return false;
});
   
$.validator.messages = {
    required: "@Messages.hello"
};*@

@*(function() {
    
var bar = $('.bar');
var percent = $('.percent');
var status = $('#status');
   
$('form').ajaxForm({
    beforeSend: function() {
        status.empty();
        var percentVal = '0%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
    uploadProgress: function(event, position, total, percentComplete) {
        var percentVal = percentComplete + '%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
	complete: function(xhr) {
	    status.html(xhr.responseText);
	    window.location = '@Url.Action("Index")'
	}
}); 

})(); *@      
</script>
